<template>
  <!-- 参考里程/油电量 -->
  <summary-info title="" :summaryList="summaryBox" v-if="supplierInfo.config?.tboxEnabled" class="summary-info"></summary-info>
</template>

<script setup name="boxInfo">
  import { ref, computed, watch } from 'vue'
  import { getByCarIdDetail } from '@/api/asset/car-virtual'
  import summaryInfo from './summary-info.vue'
  import { getEnterpriseDetail } from '@/api/common'
  import { onLoad } from '@dcloudio/uni-app'
  const props = defineProps({
    carId: {
      type: [String, Number],
      default: '',
    },
  })
  watch(
    () => props.carId,
    (val) => {
      if (val) {
        getByCarIdDetail({ id: props.carId }).then((res) => {
          summaryBoxData.value.totalMileage = res.result?.totalMileage
          summaryBoxData.value.oilRemain = res.result?.oilRemain
          summaryBoxData.value.batRemain = res.result?.batRemain
        })
      }
    },
    {
      deep: true,
      immediate: true,
    },
  )

  // 参考里程/油电量
  const summaryBoxData = ref({})
  const summaryBox = computed(() => {
    const boxInfoVal = summaryBoxData.value
    return [
      { label: '参考里程(车载BOX)', value: boxInfoVal.totalMileage !== undefined ? boxInfoVal.totalMileage : '无设备' },
      {
        label: '参考油(电)量(车载BOX)',
        value: boxInfoVal.totalMileage !== undefined ? boxInfoVal.oilRemain || boxInfoVal.batRemain : '无设备',
      },
    ]
  })

  const supplierInfo = ref({})
  // 获取商户信息
  const getSupplierInfo = () => {
    getEnterpriseDetail().then((res) => {
      const result = res.result
      supplierInfo.value = result
    })
  }
  onLoad(() => {
    getSupplierInfo()
  })
</script>
<style lang="less" scoped>
  .summary-info {
    background: #f7f8fa;
  }
  :deep(.ve-cell-title) {
    width: 380rpx;
    max-width: 380rpx;
  }
  :deep(.ve-cell-content) {
    justify-content: flex-end;
  }
</style>
